<template lang="pug">
  .sidebar-overlay-slide.from-top(ref="menu",:class='{"show": isShow}')
    ul.sidebar-system-menu.clearfix
      li(
        v-for="(nav,index) in systems"
        :style="nav|style"
        @click="changeSystem(nav)")
        .nav-label-cn {{nav.label}}
        .nav-label-en {{nav.enName}}
</template>

<script>
import IScroll from 'iscroll'
import { getSystemLink } from '@/utils/auth'

export default {
  name: 'SystemMenu',
  props: {
    navTree: Array,
    isShow: Boolean
  },
  data () {
    return {}
  },
  computed: {
    systems () {
      return this.navTree.filter(({menuTypeId}) => menuTypeId === 'SYSTEM')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  methods: {
    changeSystem: function (nav) {
      this.$emit('changeSystem', getSystemLink(nav))
    },
    initScroll () {
      if (this.menuScroll) {
        this.menuScroll.destroy()
        this.menuScroll = null
      }
      this.menuScroll = new IScroll(this.$refs.menu, {
        // scrollbars: true,
        scrollbars: 'custom',
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'scale',
        fadeScrollbars: false
      })
    }
  },
  filters: {
    style (nav) {
      return {
        background: nav.color || '#10cfbd'
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.sidebar-overlay-slide
  overflow: hidden
  background: #2b303b
  position: absolute
  top: -100%
  z-index: 799
  width: 180px
  height: 100%
  transition: top .2s ease
  &.show
    top: 0
  .sidebar-system-menu
    padding: 4px
    list-style: none
    li
      display: inline-block
      width: 80px
      height: 80px
      margin: 6px 3px
      font-size: 16px
      font-weight: bold
      text-align: center
      padding-top: 22px
      line-height: 20px
      color: #fff
      cursor: pointer
      .nav-label-cn
        font-size: 16px
      .nav-label-en
        font-size: 14px
</style>
